<div class="container-fluid">
	<div class="row-fluid" >
		<div class="span12" style="font-family:Georgia">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#upload" data-toggle="tab">Upload</a></li>
                    <li><a href="#search" data-toggle="tab">Search</a></li>
                    <li class="pull-right"><a href="#settings" data-toggle="tab">Settings</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="upload" >
                        <?php echo form_open_multipart('document/upload/doc',
                             array(
                                  'class' => "form-horizontal",
                                  'name' => "upload",
                                  'id' => "form-upload"
                             ));
                        ?>
                        <?= form_fieldset('File') ?>
                            <div class="control-group">
                                <label class="control-label" for="input-file">File</label>
                                <div class="controls">
                                    <?php echo form_upload(array('id' => 'input-file', 'name' => 'doc')) ?>
                                    <table id="input-file-info" class="muted">
                                        <tbody>
                                        <tr>
                                            <th>Type:</th>
                                            <td id="info-type">[File type]</td>
                                        </tr>
                                        <tr>
                                            <th>Size:</th>
                                            <td id="info-size">[File size]</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="input-name">Name</label>
                                <div class="controls">
                                    <?= form_input(array('id' => 'input-name', 'name' => 'file_name')) ?>
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <?= form_submit(array('value' => "Upload", 'class' => "btn btn-primary")) ?>
                                </div>
                            </div>
                        <?= form_fieldset_close() ?>
                    <?= form_close() ?>
                    </div>
                    <div class="tab-pane" id="search">
                        <div class="row-fluid">
                            <div class="span4">
                                <?php echo form_open('document', array(
                                    'class' => 'form-search'
                                ));?>
                                    <div class="control-group">
                                        <div class="controls">
                                            <input class="input-medium search-query" name = "input-search" type="text" id="input-search">
                                            <button type="submit" class="btn btn-primary">Search</button>
                                        </div>
                                    </div>
                                    <div class="btn-group">
                                        <!-- TODO decide on how buttons are labeled -->
                                        <button class="btn" onclick="searchBy('0')" type="button" id="btn_all" title="All">
                                            <em class="icon-tags"></em>All
                                        </button>
                                        <button class="btn" onclick="searchBy('1')" type="button" id="btn_name" title="Name">
                                            <em class="icon-tags"></em> Name
                                        </button>
                                        <button class="btn" type="button" onclick="searchBy('2')" id="btn_date" title="Date uploaded">
                                            <em class="icon-calendar"></em> Date Uploaded
                                        </button>
                                        <button class="btn" type="button" onclick="searchBy('3')" id = "btn_doctype" title="Type">
                                            <em class="icon-folder-open"></em> Type
                                        </button>
                                        <button class="btn" type="button" onclick="searchBy('4')" id="btn_owner" title="Uploader">
                                            <em class="icon-user"></em>Uploader
                                        </button>
                                    </div>
                                    <input type = 'hidden' value = "0" name = "filter" id = "hidden_btn_pressed">
                                </form>
                            </div>
                            <div class="span8">
                                <ul class="media-list">
                                    <?php
	                                    foreach($uploads as $upload):
                                    ?>
                                        <li class="media">
                                            <a href="#" class="pull-left"><img src="http://lorempixel.com/64/64/"
                                                                               class="media-object"
                                                                               alt=''></a>
                                            <div class="media-body">
                                                <h4 class="media-heading"><?php print_r($upload['name']) ?></h4>
                                                <ul class="inline unstyled">
                                                    <li>
                                                        <ul class="unstyled">
                                                            <li class="doc-type">
                                                                <?= $upload['mime'] ?>
                                                            </li>
                                                            <li class="doc-size">
	                                                            <?= $upload['size'] ?>
                                                            </li>
                                                            <li class="doc-meta">
                                                                Uploaded:
                                                                <span class="doc-upload-date">
                                                                    <?= $upload['date']?>
                                                                </span><br>
                                                                by <a class="doc-uploader" href="#"><?php echo $upload['owner'] ?></a></li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <ul class="unstyled">
                                                            <li>

                                                                <a href=<?php echo "'document/download/".$upload['id']."/".str_replace(" ", "_",$upload['name'])."'"; ?> >View/Download</a></li>
                                                            <li>
                                                                <a href= <?php echo "'document/remove/".$upload['fileId']."/".$upload['id']."/".str_replace(" ", "_",$upload['name'])."'"; ?> >Remove</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    <?php endforeach ?>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="settings">
                        Settings
                    </div>
                </div>
            </div>
		</div>
	</div>
</div>

<script>
    function searchBy(filter){
        $('#hidden_btn_pressed').val(filter);
    }

    $('#input-file').change(
        function(){
            path = $('#input-file').val();
            pathArray = path.split('\\');
            fileName = pathArray[pathArray.length-1];
            $('#input-name').val(fileName);
        }
    )

</script>